<!-- 导入题目 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="600px"
    @close="onClose"
  >
    <div class="import-container">
      <!-- 下载模板 -->
      <div class="import-item">
        <span class="label">题目导入模板</span>
        <el-button size="small" @click="downloadTemplate"
          >下载题目导入模板</el-button
        >
      </div>

      <!-- 上传文件 -->
      <div class="import-item">
        <span class="label">批量上传题目</span>
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx,.xls"
          :action="upload.url"
          :headers="upload.headers"
          :file-list="fileList"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          :show-file-list="true"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
        >
          <el-button
            size="small"
            type="primary"
            :loading="upload.isUploading"
            @click="submitUpload"
            >上传题目</el-button
          >
        </el-upload>
      </div>

      <!-- 上传状态提示 -->
      <div v-if="uploadStatus" class="upload-status">
        {{ uploadStatus }}
        <el-link type="primary" style="margin-left: 10px" @click="removeFile"
          >删除</el-link
        >
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirmImport">导入</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { importData } from "@/api/examination/question";
import { getToken } from "@/utils/auth";
export default {
  name: "ImportQuestionDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "导入题目",
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/examination/question/importData",
        // 上传的文件列表
        fileList: [],
      },
      // fileList: [], // 上传的文件列表
      uploadStatus: "",
      file: null,
    };
  },
  methods: {
    downloadTemplate() {
      const baseUrl = process.env.VUE_APP_DOWNLOAD_BASE_URL;
      const filePath = "/statics/2025/10/30/Excel.xlsx";
      const fullUrl = `${baseUrl}${filePath}`;

      this.$download.saveAs(fullUrl, "题目导入模板.xlsx");
    },

    handleChange(file, fileList) {
      this.file = file.raw;
      this.fileList = fileList;
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.uploadStatus = "";
      this.file = null;
    },

    handleExceed() {
      this.$message.warning("最多只能上传一个文件");
    },

    beforeUpload(file) {
      const isExcel =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel";
      if (!isExcel) {
        this.$message.error("请上传 Excel 文件");
        return false;
      }
      return true;
    },
    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.form.filePath = response.url;
      this.msgSuccess(response.msg);
    },
    removeFile() {
      this.handleRemove(this.fileList[0], []);
    },

    confirmImport() {
      // 触发上传操作
      this.submitUpload();
      // 在上传完成后关闭对话框
      this.$emit("update:visible", false);
      this.reset();
    },

    cancel() {
      this.$emit("update:visible", false);
      this.reset();
    },

    reset() {
      this.fileList = [];
      this.uploadStatus = "";
      this.file = null;
      this.$refs.upload.clearFiles();
    },

    onClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
  },
};
</script>

<style scoped>
.import-container {
  padding: 30px;
}

.import-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  font-size: 14px;
  color: #666;
  min-width: 100px;
}

.upload-status {
  margin-top: 10px;
  color: #409eff;
  font-size: 14px;
}
</style>